<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />

    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
    Remove this if you use the .htaccess -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <title>부트스트랩 기초-구조</title>
    <meta name="description" content="" />
    <meta name="author" content="" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
    <link rel="stylesheet" href="css/font-awesome.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>

    <!--[if IE 7]>
      <link rel="stylesheet" href="css/font-awesome-ie7.min.css">
    <![endif]-->    
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

  </head>

  <body>

    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">부트스트랩 기초 배우기</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active"><a href="hero1-begin.html">구조</a></li>
              <li class=""><a href="hero2-begin.html">기본 CSS</a></li>
              <li class=""><a href="hero3-begin.html">구성요소1</a></li>
              <li class=""><a href="hero4-begin.html">구성요소2</a></li>
              <li class=""><a href="hero5-begin.html">자바스크립트</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container">

      <!-- Main hero unit for a primary marketing message or call to action -->
      <div class="hero-unit">
        <h1>안녕하세요!</h1>
        <p>부트스트랩 기초 배우기입니다.</p>
        <h2>부트스트랩 기초-구조(Scaffolding)</h2>
        <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
      </div>
      <div id="toc" class="span3 well well-small">
      </div><!-- /.well -->
      <!-- Example row of columns -->
      <h4>그리드 시스템과 고정폭 레이아웃</h4>
      <h4 class="sub-title">3컬럼 레이아웃</h4>
      <hr>
      <div class="row">
      	<div class="span4">
      		<h2>Heading</h2>
      		<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
      		<p><a class="btn" href="#">View details &raquo;</a></p>
      	</div>
      	<div class="span4">
      		<h2>Heading</h2>
      		<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
      		<p><a class="btn" href="#">View details &raquo;</a></p>
      	</div>
      	<div class="span4">
      		<h2>Heading</h2>
      		<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
      		<p><a class="btn" href="#">View details &raquo;</a></p>
      	</div>
      </div>
      <div class="row">
      	<div class="span4">
      		<h2>Heading</h2>
      		<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
      		<p><a class="btn" href="#">View details &raquo;</a></p>
      	</div>
      	<div class="span4">
      		<h2>Heading</h2>
      		<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
      		<p><a class="btn" href="#">View details &raquo;</a></p>
      	</div>
      	<div class="span4">
      		<h2>Heading</h2>
      		<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
      		<p><a class="btn" href="#">View details &raquo;</a></p>
      	</div>
      </div>
      <hr>
      <h4 class="sub-title">12컬럼 레이아웃</h4>
      <div class="row">
      	<div class="span1">
      		<p>1</p>
      	</div>
      	<div class="span1">
      		<p>2</p>
      	</div>
      	<div class="span1">
      		<p>3</p>
      	</div>
      	<div class="span1">
      		<p>4</p>
      	</div>
      	<div class="span1">
      		<p>5</p>
      	</div>
      	<div class="span1">
      		<p>6</p>
      	</div>
      	<div class="span1">
      		<p>7</p>
      	</div>
      	<div class="span1">
      		<p>8</p>
      	</div>
      	<div class="span1">
      		<p>9</p>
      	</div>
      	<div class="span1">
      		<p>10</p>
      	</div>
      	<div class="span1">
      		<p>11</p>
      	</div>
      	<div class="span1">
      		<p>12</p>
      	</div>
      </div>
      <hr>
      <h4 class="sub-title">2컬럼 레이아웃-사이드바 우측</h4>
      <div class="row">
      	<div class="span8">
      		<h2>Heading</h2>
      		<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
      		<p><a class="btn" href="#">View details &raquo;</a></p>
      	</div>
      	<div class="span4">
      		<h2>Heading</h2>
      		<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
      		<p><a class="btn" href="#">View details &raquo;</a></p>
      	</div>
      </div>
      <hr>
      <h4 class="sub-title">2컬럼 레이아웃-사이드바 좌측</h4>
      <div class="row">
      	<div class="span4">
      		<h2>Heading</h2>
      		<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
      		<p><a class="btn" href="#">View details &raquo;</a></p>
      	</div>
      	<div class="span8">
      		<h2>Heading</h2>
      		<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
      		<p><a class="btn" href="#">View details &raquo;</a></p>
      	</div>
      </div>
      <hr>
      <h4>컬럼 오프셋</h4>
      <div class="row">
      	<div class="span4">
      		<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
      	</div>
      	<div class="span3 offset">
      		<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
      	</div>
      </div>
      <hr>
      <h4>컬럼 네스팅(Column Nesting)</h4>
      <div class="row">
      	<div class="span12">
      		<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
      		<div class="row">
      			<div class="span8">
		      		<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
		      	</div>
		      	<div class="span4">
		      		<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
		      	</div>
      		</div>
      	</div>
      </div>
      <hr>
      <h4 class="sub-title">컬럼 네스팅을 적용한 2컬럼 레이아웃</h4>
      <div class="row">
      	<div class="span12">
      		<div class="row">
      			<div class="span8">
      				<div class="row">
		        		<div class="span8">
				          <h2>Heading</h2>
				          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
				          <p><a class="btn" href="#">View details &raquo;</a></p>
				        </div>
				        <div class="span8">
				        	<div class="row">
				        		<div class="span4">
						          <h2>Heading</h2>
						          <p class="lead">Donec id elit non mi <small>porta gravida</small> at eget metus. <strong>Fusce dapibus</strong>, tellus ac <em>cursus commodo</em>, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. ...</p>
						          <p><a class="btn" href="#">View details &raquo;</a></p>
				          	</div>
				        		<div class="span4">
						          <div class="row">
						          	<div class="span2">
						          		<p>condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui</p>
						          	</div>
						          	<div class="span2">
						          		<p>condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui</p>
						          	</div>
						          </div>
				          	</div>
				          </div>
				        </div>
      				</div>
      			</div>
		        <div class="span4">
		          <h2>Heading</h2>
		          <p class="lead">Donec id elit non mi <small>porta gravida</small> at eget metus. <strong>Fusce dapibus</strong>, tellus ac <em>cursus commodo</em>, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. ...</p>
		          <p><a class="btn" href="#">View details &raquo;</a></p>
		        </div>
      		</div>
      	</div>
      </div>
      <hr>
      <h4 class="sub-title">2컬럼 레이아웃-유동폭</h4>
      <div class="row-fluid"><!-- .row를 감싸고 있는 .container 선택자에 -fluid를 추가하면 유동폭으로 전환됩니다. -->
      	<div class="span4">
          <h2>Heading</h2>
          <p class="lead">Donec id elit non mi <small>porta gravida</small> at eget metus. <strong>Fusce dapibus</strong>, tellus ac <em>cursus commodo</em>, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. ...</p>
          <p><a class="btn" href="#">View details &raquo;</a></p>
        </div>
        <div class="span8">
          <h2>Heading</h2>
          <p class="lead">Donec id elit non mi <small>porta gravida</small> at eget metus. <strong>Fusce dapibus</strong>, tellus ac <em>cursus commodo</em>, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. ...</p>
          <p><a class="btn" href="#">View details &raquo;</a></p>
        </div>
      </div>
      <hr>
      <h4>반응형 선택자</h4>
      <h4 class="sub-title">반응형 선택자-span4에 visible-phone을 추가한 경우</h4>
      <div class="row">
          <div class="span4 hidden-phone">
            <h2>Heading</h2>
            <p class="lead">Donec id elit non mi <small>porta gravida</small> at eget metus. <strong>Fusce dapibus</strong>, tellus ac <em>cursus commodo</em>, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. ...</p>
            <p><a class="btn" href="#">View details &raquo;</a></p>
          </div>
          <div class="span8">
            <h2>Heading</h2>
            <p class="lead">Donec id elit non mi <small>porta gravida</small> at eget metus. <strong>Fusce dapibus</strong>, tellus ac <em>cursus commodo</em>, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. ...</p>
            <p><a class="btn" href="#">View details &raquo;</a></p>
          </div>
      </div>
      <hr>
      <h4 class="sub-title">반응형 선택자-span4에 visible-tablet을 추가한 경우</h4>
      <div class="row">
        <div class="span4 visible-tablet">
          <h2>Heading</h2>
          <p class="lead">Donec id elit non mi <small>porta gravida</small> at eget metus. <strong>Fusce dapibus</strong>, tellus ac <em>cursus commodo</em>, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. ...</p>
          <p><a class="btn" href="#">View details &raquo;</a></p>
        </div>
        <div class="span8">
          <h2>Heading</h2>
          <p class="lead">Donec id elit non mi <small>porta gravida</small> at eget metus. <strong>Fusce dapibus</strong>, tellus ac <em>cursus commodo</em>, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. ...</p>
          <p><a class="btn" href="#">View details &raquo;</a></p>
        </div>
      </div>
      <hr>
      <h4 class="sub-title">반응형 선택자-span4에 visible-desktop을 추가한 경우</h4>
      <div class="row">
        <div class="span4 visible-desktop">
          <h2>Heading</h2>
          <p class="lead">Donec id elit non mi <small>porta gravida</small> at eget metus. <strong>Fusce dapibus</strong>, tellus ac <em>cursus commodo</em>, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. ...</p>
          <p><a class="btn" href="#">View details &raquo;</a></p>
        </div>
        <div class="span8">
          <h2>Heading</h2>
          <p class="lead">Donec id elit non mi <small>porta gravida</small> at eget metus. <strong>Fusce dapibus</strong>, tellus ac <em>cursus commodo</em>, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. ...</p>
          <p><a class="btn" href="#">View details &raquo;</a></p>
        </div>
      </div>

      <footer>
        <p>&copy; Company 2012</p>
      </footer>

    </div> <!-- /container -->


  </body>
</html>
